<template>
    <div>
      <header-top :type="type"></header-top>
      <el-menu
        :default-active="defaultActive"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
            <el-menu-item index="1"><router-link tag="li" to="/express">在线下单</router-link></el-menu-item>
            <el-menu-item index="2"><router-link tag="li" to="/expressInquiry">快递查询</router-link></el-menu-item>
            <el-menu-item index="3"><router-link tag="li" to="/personalCenter">个人资料</router-link></el-menu-item>
        </el-menu>
      </div>
</template>
<script>
import HeaderTop from './../../common/header'
  export default {
    name: 'header-item',
    props: ['activeIndex'],
    components:{
      'header-top':HeaderTop
    },
    data() {
      return {
        defaultActive: this.activeIndex,
        type:'客户'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style  scoped>
ul.el-menu-demo.el-menu--horizontal.el-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>